<template >
    <div class="selectBox" v-if="ok">
        <el-button type="primary" size="small" @click="uDialog" icon="el-icon-plus">添加用户组</el-button>
         <!-- dialog 添加用户组-->
        <el-dialog title="用户组" :visible.sync="dialogFormVisible" @close="closeDialog">
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="180px" style="">
                <el-form-item label="用户组名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入用户组名称" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户组描述" prop="desc">
                    <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入用户组描述"
                    v-model="form.desc">
                    </el-input>
                </el-form-item>
                <el-form-item label="呼叫最大次数" prop="max_num">
                    <el-input v-model.number="form.max_num" placeholder="请输入呼叫最大次数" auto-complete="off">
                        <template slot="prepend">最大次数:{{max_number}}</template>
                        <template slot="append">次</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="呼叫最小间隔" prop="min_int">
                    <el-input v-model.number="form.min_int" placeholder="请输入呼叫最小间隔" auto-complete="off">
                        <template slot="prepend">最小间隔:{{min_interval}}</template>
                        <template slot="append">秒</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每日任务数" prop="max_num_of_daily_tasks">
                    <el-input v-model.number="form.max_num_of_daily_tasks" placeholder="请输入每日任务数" auto-complete="off">
                        <template slot="prepend">最大次数:{{max_num_of_daily_tasks}}</template>
                        <template slot="append">次</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="单帐号每日任务数" prop="max_num_of_daily_tasks_for_account">
                    <el-input v-model.number="form.max_num_of_daily_tasks_for_account" placeholder="请输入单帐号每日任务数" auto-complete="off">
                        <template slot="prepend">最大次数:{{max_num_of_daily_tasks_for_account}}</template>
                        <template slot="append">次</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch 
                    v-model="status_Boolean"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="add_switchChange"
                    >
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getUserGroup,addUserGroup,UserGroupDetail,updateUserGroup} from '@/api/userGroup'
import { mapGetters } from 'vuex'
import {addGroupBtnLevel} from '@/utils/static_data'
import {getUsersLimited} from '@/api/tasks'
export default{
    data(){
        return {
            dialogFormVisible: false,
            ok: false,
            value: '',
            addGroupBtnLevel,
            status_Boolean: true,
            form:{
                name: '',
                max_num: '',
                min_int:'',
                desc: '',
                status: 1,
                max_num_of_daily_tasks: '',
                max_num_of_daily_tasks_for_account: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户组名称', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请输入用户组描述', trigger: 'blur' }
                ],
                min_int: [
                    { required: true, message: '请输入呼叫最小间隔', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值'}
                ],
                max_num: [
                    { required: true, message: '请输入呼叫最大次数', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值'}
                ],
                max_num_of_daily_tasks: [
                    { required: true, message: '请输入每日任务数', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值'}
                ],
                max_num_of_daily_tasks_for_account: [
                    { required: true, message: '请输入单帐号每日任务数', trigger: 'blur' },
                    { type: 'number', message: '必须为数字值'}
                ]
            },
            operType: 1, // 1 add; 2 update
            max_number: '', //最大呼叫次数
            min_interval: '', //最小呼叫间隔
            max_num_of_daily_tasks: '', //每日任务最大数
            max_num_of_daily_tasks_for_account: '', //单帐号每日任务最大数
        }
    },
    created(){
        const res = (this.addGroupBtnLevel).indexOf(this.roles[0])
        if(res !== -1){
            this.ok = true
        }
        this.getUsersLimitedFun()
    },
    methods:{
        //添加用户组-switch
        add_switchChange(val){
            this.status_Boolean = val
        },
        //保存
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.status = this.status_Boolean ? 1 : 0
                    if(this.operType == 2){
                        this.updateUserGroupFun()
                    }else{
                        this.addUserGroupFun()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
         //添加用户组
        addUserGroupFun(){
            addUserGroup(this.form, response=> {
                const res = response.data;
                this.$emit("addUserGroupEvent", [res, {msg: '添加成功'}])
                if(res.code === 1){
                    this.dialogFormVisible = false
                }
            })
        },
        //更新
        updateUserGroupFun(){
            updateUserGroup(this.userGroupId, this.form, response=> {
                const res = response.data;
                this.$emit("addUserGroupEvent", [res, {msg: '更新成功'}])
                if(res.code === 1){
                    this.dialogFormVisible = false
                }
            })
        },
        //编辑
        handleEdit() {
            this.dialogFormVisible = true
            UserGroupDetail(this.userGroupId, response=> {
                const res = response.data;
                if(res.code === 1){
                    this.form = res.data;
                    this.status_Boolean = (res.data.status === 1) ? true : false
                }
            })
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields()
            this.status_Boolean =  true
        },
        closeDialog(){
            this.operType = 1
            this.resetForm('ruleForm')
        },
        uDialog(){
            this.dialogFormVisible = true
        },
        //获取用户呼叫次数和间隔
        getUsersLimitedFun(){
            getUsersLimited(response=> {
                const res = response.data
                if(res.code == 1){
                    this.max_number = (res.data).max_number
                    this.min_interval = (res.data).min_interval
                    this.max_num_of_daily_tasks = (res.data).max_num_of_daily_tasks
                    this.max_num_of_daily_tasks_for_account = (res.data).max_num_of_daily_tasks_for_account
                }
            })
        }
    },
    computed: {
        ...mapGetters([
        'roles'
        ])
    },
    props:['randomNum','userGroupId'],
    watch: {
        randomNum: function(v){
            this.operType = 2
            this.handleEdit();
        }
    }
}
</script>
<style lang="stylesheet/scss" lang="scss" scoped>
    .selectBox{
        display: inline-block;
    }
</style>